/* js自定义函数 */
/* function onSubmit(){
	var $userName = $("#userName").val();
	if ($userName == '') {
		// $("#errAddInfo").html("请填写完整的用户信息!!!");
		alert("请填写完整的用户信息!!!");
	}
	var $phone = $("#phone").val();
	if ($phone == '') {
		alert("请填写完整的用户信息!!!");
	}
} */
/* jQuery事件绑定必须放置在函数中(1、jQuery页面初始加载事件；2、js函数中) */
/* $ 等同于 jQuery */
$(function() {
	init();
	// a href="javascript:void(0)" : 禁止刷新当前页面
	// 使用jQuery动态删除数据
	$(".del").click(function(){
		if (confirm("确认删除当前数据吗?")) {
			// 删除
			// this 代表当前dom元素
			$(this).parent().parent().remove();
		}
	});
	// jQuery 鼠标移进(mouseover , mouseenter) 移出事件(mouseout , mouseleave)
	// mouseover 和 mouseenter 一套使用		mouseout 和 mouseleave 一套使用
	// mouseover 和 mouseenter 区别：	mouseover 事件在鼠标移动到选取的元素及其子元素上时触发
	//									mouseenter 事件只在鼠标移动到选取的元素上时触发
	
	// 搜索查询
	$(".btnSeach").click(function(){
		// 获取搜索文本框值
		let $search = $("[name='search']").val();
		if ($search == '') {
			init();
		}
		// 使用jQuery获取dom元素中所有中签编码
		let $markNo = $(".markNo");
		// console.log($markNo);
		// 循环遍历
		// 将查询的数据重新加载绑定
		$markNo.each(function(index){
			let mNo = $($markNo[index]).text();
			// console.log(mNo);
			if ($search == mNo) {
				// console.log(index);
				let $tr = $("tbody tr").eq(index);
				// console.log($tr);
				$("tbody").html($tr);
				color();
			}
		});
	});
});
function init(){
	/* jQuery绑定事件 */
	/* $(".checkUser").click(function(){
		alert("check");
	}); */
	/* 添加数据单机事件 */
	$("#submit input:first").click(function() {
		var $inputs = $("[name='input']");
		// alert($inputs);
		$inputs.each(function(i) {
			if ($($inputs[i]).val() == '') {
				alert("请填写完整的用户信息!!!");
			}
		});
	});
	/* 初始加载列表数据 */
	/* js操作dom元素  -->  jquery也可操作dom元素 */
	// ECMAScript 简称ES，ES6(ECMAScript版本名称)
	// js定义数据类型的关键字，var 是 ES5 之前定义数据类型关键字，ES6建议使用let定义数据类型关键字
	// 将前端页面静态数据更改成动态数据
	// 使用json数据存储一个对象
	// 未持照 1      已持照 0
	let arrStatus = new Array("已持照" , "未持照");
	let jsonTr = {
		"userName": "胡应修",
		"markNo": "bj53473409",
		"status": 1,
		"phone": "13574556682",
		"openDate": "2021-07-07"
	}
	// 使用json存储多个对象
	let jsonTrArrs = [
		{
			"userName": "胡应修",
			"markNo": "bj53473409",
			"status": 1,
			"phone": "13574556682",
			"openDate": "2021-07-07"
		},
		{
			"userName": "张筱雨",
			"markNo": "hb99971228",
			"status": 0,
			"phone": "18774556690",
			"openDate": "2021-07-04"
		},
		{
			"userName": "尚晶品",
			"markNo": "bj45562320",
			"status": 1,
			"phone": "18732365599",
			"openDate": "2021-07-05"
		},
	];
	let $tr = `<tr>
					<td>${jsonTr.userName}</td>
					<td>${jsonTr.markNo}</td>
					<td>${arrStatus[jsonTr.status]}</td>
					<td>${jsonTr.phone}</td>
					<td>${jsonTr.openDate}</td>
				</tr>`;
	// 循环遍历json对象数组
	let $TrStr = "";
	$("tbody").empty();
	$(jsonTrArrs).each(function(index){
		let arrJson = jsonTrArrs[index];
		$TrStr += `<tr>
					<td>${arrJson.userName}</td>
					<td class="markNo">${arrJson.markNo}</td>
					<td>${arrStatus[arrJson.status]}</td>
					<td>${arrJson.phone}</td>
					<td>${arrJson.openDate}</td>
					<td>
						<a href="">详情</a>&nbsp;&nbsp;&nbsp;
						<a href="javascript:void(0);" class="del">删除</a>
					</td>
				</tr>`;
	});
	// 前后端不分离：使用js或者jQuery动态追加绑定元素用什么方法？ jQuery：append();  js：appendChild()
	// jQuery绑定dom元素
	// A.append(B)  将B元素追加到A元素中
	// $("tbody").append($tr);
	$("tbody").append($TrStr);
	// 使用jQuery进行隔行换色
	$("tbody tr").odd().css("background-color" , "lightblue");
	color();
}
function color(){
	// 鼠标移进
	$("tbody tr").mouseover(function(){
		// 常识：1.css()样式添加的是行内样式   2.addClass() 添加class样式
		$(this).addClass("bg");
		// $(this).css("background-color" , "black");
	});
	// 鼠标移出
	$("tbody tr").mouseout(function(){
		// $(this).css("background-color" , "black");
		$(this).removeClass("bg");
	});
	// click mouseover mouseout 属于单个事件 ; hover 鼠标移进、移出事件，属于复合事件
	$("tbody tr").hover(function(){
		$(this).css("border","2px solid green");
	},function(){
		$(this).css("border","2px solid black");
	});
}
